<template>
  <view class="container">
    <map
      v-if="mapLoading"
      id="map"
      :longitude="mapCenter.longitude"
      :latitude="mapCenter.latitude"
      :scale="mapCenter.scale"
      :markers="markersData"
      enable-satellite
      show-location
      enable-poi
      @markertap="mapMarkertap"
      @callouttap="mapMarkertap"
    >
      <cover-view class="cover-view" v-if="controller">
        <cover-view class="refresh" @click="refresh">
          <uni-icons type="loop" color="#555" size="24" />
          <cover-view>刷新</cover-view>
        </cover-view>
        <cover-view class="location" @click="onControltap">
          <uni-icons type="map-pin-ellipse" color="#555" size="24" />
          <cover-view>定位</cover-view>
        </cover-view>
      </cover-view>
    </map>
    <view class="loading" v-else>
      <uni-icons class="loop" type="loop" color="#eee" size="70" />
      加载中……</view
    >

    <uni-popup
      ref="popup"
      class="popup"
      type="bottom"
      border-radius="10px 10px 0 0"
      @change="popupChange"
    >
      <mapPopup :data="popupData" :mapContext="mapContext"></mapPopup>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { getMapDataAPI } from "@/services/index";
import mapPopup from "./components/mapPoopup.vue";
import map from "@/utils/map";
let mapLoading = ref(false);
let controller = ref(true);
let mapCenter = reactive({
  longitude: 112.48461151123047,
  latitude: 23.051959991455078,
  scale: 16,
});

let markersData = reactive<any>([]);
let popup = ref<any>();

let popupData = ref<any>({});
// 获取页面参数
const query = defineProps<{ type: string }>();
let mapContext = ref();
// 要添加的属性
const additionalProperties = {
  color: "#ffffff", // 文字颜色
  fontSize: 15, // 文本大小
  borderRadius: 15, // 边框圆角
  padding: "10",
  bgColor: "#406390", // 背景颜色
  display: "ALWAYS", // 常显
};

// 函数来更新每个对象
function addPropertiesToArray(array: any) {
  return array.map((item: any) => {
    const { longitude, latitude } = map.BaiduMapTransTxMap(
      +item.longitude,
      +item.latitude
    );

    return {
      ...item,
      longitude,
      latitude,
      width: 20,
      height: 30,
      callout: {
        content: item.name,
        ...additionalProperties,
      },
    };
  });
}
// 获取数据
const getMarkersData = async () => {
  let type = query.type === "1" ? "food" : "travel";
  let result: any = await getMapDataAPI(
    { longitude: mapCenter.longitude, latitude: mapCenter.latitude },
    type,
    500
  );
  markersData = addPropertiesToArray(result.data);
  setTimeout(() => {
    mapLoading.value = true;
  }, 1000);
};

onShow(() => {
  getMarkersData();

  mapContext.value = uni.createMapContext("map");
  // 动态设置标题
  uni.setNavigationBarTitle({
    title: query.type === "1" ? "美食地图" : "旅游地图",
  });

  getLocation();
});
/**
 * 获取当前位置
 */
const getLocation = () => {
  uni.getLocation({
    type: "gcj02",
    success: (res) => {
      mapCenter.longitude = res.longitude;
      mapCenter.latitude = res.latitude;
    },
  });
};
// 点击地图标点
const mapMarkertap = (e: any) => {
  popup.value.open();
  popupData.value = markersData.find((v: any) => v.id == e.markerId);

  mapContext.value.moveToLocation({
    latitude: popupData.value.latitude,
    longitude: popupData.value.longitude,
  });
};

// 弹出框
const popupChange = (e: any) => {
  if (e.show) {
    controller.value = false;
  } else {
    controller.value = true;
    popupData.value = {};
  }
};
// 刷新
const refresh = () => {
  mapLoading.value = false;
  getLocation();
  // 重新获取数据
  setTimeout(() => {
    getMarkersData();
  }, 1000);
};

// 定位按钮
const onControltap = () => {
  getLocation();
  mapContext.value.moveToLocation({
    latitude: mapCenter.latitude,
    longitude: mapCenter.longitude,
  });
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  position: relative;
  map {
    height: 100%;
    width: 100%;
  }
  .cover-view {
    position: absolute;
    font-size: 24rpx;
    width: 60rpx;
    height: 190rpx;
    right: 20rpx;
    bottom: 20%;
    background-color: white;
    color: #555;
    border-radius: 15rpx;
    padding: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    .refresh,
    .loaction {
      height: 50%;
    }
    .refresh {
      border-bottom: 1rpx solid #ddd;
    }
  }
  .loading {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 300rpx;
    width: 300rpx;
    border-radius: 20rpx;
    background-color: #5555557e;
    color: #eee;
    font-size: 36rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .loop {
      animation: rotate 1.5s linear infinite;
      margin-bottom: 20rpx;
    }

    @keyframes rotate {
      // 旋转动画
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
}
</style>
